<template>
    <div v-loading="loading">
        <el-card body-style="padding:10px" class="box-card">
            <el-date-picker v-model="date_times"  type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="getTimes"></el-date-picker>
            <el-select v-model="query.status" placeholder="请选择类型">
                <el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.value">
                </el-option>
            </el-select>
            <el-select v-model="query.payment" placeholder="请选择支付方式">
                <el-option v-for="item in options2" :key="item.value" :label="item.name" :value="item.value">
                </el-option>
            </el-select>

            <el-button @click="page=1;init()" size="small" style="margin-left: 30px;" type="primary">搜索</el-button>
            <el-button @click="page=1;init()" icon="el-icon-refresh-right" size="small" type="primary">刷新</el-button>
        </el-card>
        <el-card body-style="padding:10px" class="box-card mt-10">
            <el-table :data="data" max-height="640px" size="small" style="width: 100%">
                <el-table-column label="ID" prop="id" width="40px"></el-table-column>
                <el-table-column label="用户ID" prop="user_id" width="140px">
                    <template slot-scope="scope">
                        <UserInfo :user_id="scope.row.user_id" :userInfos="scope.row.user_info" v-if="scope.row.user_id"></UserInfo>
                    </template>
                </el-table-column>
                
                <el-table-column label="充值人民币" prop="money"></el-table-column>
                <el-table-column label="充值金币" prop="balance"></el-table-column>
                <el-table-column label="金币充值前余额" prop="before"></el-table-column>
                <el-table-column label="金币充值后余额" prop="after"></el-table-column>
              
                <el-table-column label="内部订单号" prop="trade_no"></el-table-column>
                <el-table-column label="外部订单号" prop="out_trade_no"></el-table-column>
                <el-table-column label="支付方式" prop="payment" width="100px">
                    <template slot-scope="scope">
                        <div> {{ scope.row.payment == 'wechat' ? "微信" : scope.row.payment == 'alipay' ? "支付宝" : "ios" }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="到账金币" prop="balance"></el-table-column>
                <el-table-column label="类型" prop="status">
                    <template slot-scope="scope">
                        <div v-if="scope.row.status == 0">待支付</div>
                        <div v-else-if="scope.row.status == 1">已支付</div>
                        <div v-else-if="scope.row.status == 2">充值失败</div>
                        <div v-else-if="scope.row.status == 3">取消</div>
                        <div v-else>退款</div>
                    </template>
                </el-table-column>
                <el-table-column label="充值时间" sortable prop="created_at"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="toDetails(scope.row.id)" size="mini" type="success"
                            style="padding: 10px"  v-permission="['ADMIN','RECHARGE_DETAILS']">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!-- 分页组件 -->
        <el-card body-style="padding:10px" class="box-card mt-10">
            <el-pagination :current-page="page" :total="total" @current-change="pageChange" @size-change="sizeChange"
                layout="total, prev, pager, next, sizes" style="margin-top: 8px;" />
        </el-card>
    </div>
</template>
      
<script>
import treeSelect from '@/components/SelectTree/index'
import medium from '@/components/medium/index'
import initData from '@/mixins/index'
export default {
    name:"recharge-list",
    mixins: [initData],
    components: {
        treeSelect,
        medium
    },
    data() {
        return {
            submitComplete:false,
            query: {
                status: '',
                vip_id: '',
                payment: '',
                start_time: "",
                end_time: "",
            },
            form: {
                name: '',
                type: '',
                used: ''
            },
            visible: false,
            loading: false,
            page: 1,
            tableData: [],
            type: 'create',
            worksId: '',
            options: [
                {
                    name: '待支付',
                    value: 0,
                },
                {
                    name: '支付成功',
                    value: 1,
                },
                {
                    name: '失败',
                    value: 2,
                }, {
                    name: '取消',
                    value: 3,
                },
                {
                    name: '退款',
                    value: 4,
                },
            ],
            options2: [
                {
                    name: '支付宝',
                    value: 'alipay',
                },
                {
                    name: '微信',
                    value: 'wechat',
                },
                {
                    name: 'ios',
                    value: 'ios',
                }
            ],
            formattedDate: '',
            date_times:[]
        }
    },
    mounted() {
        //this.getworksList()
        this.beforeInit()
    },
    methods: {
        beforeInit() {
            this.url = '/recharge-order/index'
            this.init() //重新请求数据
        },
        getTimes(value){
            this.query.start_time=value[0]
            this.query.end_time=value[1]
        },

        del(id) {
            this.$request.del('/label/delete/' + id).then((res) => {
                this.$message.success('删除成功')
                this.init() //重新请求数据
            })
        },


        toDetails(id) {
            this.$router.push({ path: "/recharge-details?id=" + id });
        },


        closeBox() {
            this.type = 'create'
            this.visible = false
            this.form = {
                name: '',
                type: '',
                used: ''
            }
        },


        //提交
        submit() {
            if(this.submitComplete) return
            this.submitComplete = true
            if (!(this.form.name && this.form.type && this.form.used)) {
                this.$message({
                    message: '请将信息填写完整！',
                    type: 'warning'
                });
                this.submitComplete = false
                return
            }
            if (this.type == 'create') {
                this.$request.post('/label/create', this.form).then((res) => {
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    });
                    this.submitComplete = false
                    this.init() //重新请求数据
                    this.closeBox()

                }).catch((error) => {
                    this.submitComplete = false
                });
            } else {
                this.$request.put('/label/update/' + this.worksId, this.form).then((res) => {
                    console.log(res)
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                    this.submitComplete = false
                    this.init() //重新请求数据
                    this.closeBox()


                }).catch((error) => {
                    this.submitComplete = false
                });
            }
        },
    },
}
</script>
      
<style lang="scss" scoped>
.butBox {
    background-color: rgb(219, 219, 219);
    border: none;
    color: #555;
}
</style>